<template>
  <div class="class-config">
    <div class="class-config-container">
      <div class="title">班级配置({{ className }})</div>
      <div class="step-container">
        <el-steps :active="activeStep" align-center>
          <el-step v-for="(i, n) in stepsList" :key="n" :title="i.title" />
        </el-steps>
      </div>
      <div class="content-container">
        <div v-show="activeStep === 1" class="plane1">
          <el-form ref="form" :model="form" label-width="145px" :rules="rulesForm">
            <el-form-item label="结课要求" prop="classRemarks">
              <el-input v-model="form.classRemarks" type="textarea" />
            </el-form-item>
            <el-form-item label="班级人数上限">
              <el-input-number
                v-model="form.registLimit"
                :disabled="form.registLimitCheck"
                :controls="false"
                :min="0"
                style="width: 30%"
                placeholder="请输入班级人数上限"
              />
              <el-checkbox v-model="form.registLimitCheck" label="不限制" />
            </el-form-item>
            <el-form-item label="是否显示讨论交流">
              <el-radio v-model="form.isShowDiscuss" label="0">否</el-radio>
              <el-radio v-model="form.isShowDiscuss" label="1">是</el-radio>
            </el-form-item>
            <el-form-item label="班级准入方式">
              <el-radio v-model="form.isRegist" label="0">报名</el-radio>
              <el-radio v-model="form.isRegist" label="1">指定</el-radio>
              <el-radio v-model="form.isRegist" label="2">不限制</el-radio>
              <!-- <div v-if="form.isRegist === '1'" style="margin-top:10px; ">
                <el-button type="primary" @click="insertTable">选择人员</el-button>
                <el-table :data="form.tableData" style="width: 100% ;margin-top: 10px;">
                  <el-table-column prop="userRealname" label="姓名" />
                  <el-table-column prop="name" label="手机号">
                    <template slot-scope="scope">
                      {{ scope.row.phoneNumber | formmat }}
                    </template>
                  </el-table-column>
                  <el-table-column prop="deptName" label="部门" />
                  <el-table-column prop="address" label="操作">
                    <template slot-scope="scope">
                      <el-button v-if="scope.row.showDelete" type="text" size="small" @click="deleteTable(scope.$index)">删除 </el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </div> -->
              <!-- <div v-if="form.isRegist === '0'">
                <div>报名范围</div>
                <el-radio v-model="form.registRange" label="0">注册用户</el-radio>
                <el-radio v-model="form.registRange" label="1">认证用户</el-radio>
              </div> -->
            </el-form-item>
            <el-form-item v-if="form.isRegist === '0'" label="报名范围">
              <el-radio v-model="form.registRange" label="0">注册用户</el-radio>
              <el-radio v-model="form.registRange" label="1">认证用户</el-radio>
            </el-form-item>
            <el-form-item v-if="form.isRegist === '0'" label="报名时间">
              <el-date-picker
                v-model="form.value1"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                style="width: 60%"
                value-format="yyyy-MM-dd HH:mm:ss"
                format="yyyy-MM-dd HH:mm:ss"
              />
            </el-form-item>
            <el-form-item v-if="form.isRegist === '0'" label="是否需要人工审核">
              <el-radio v-model="form.isManual" label="1">需要</el-radio>
              <el-radio v-model="form.isManual" label="2">不需要</el-radio>
            </el-form-item>
            <el-form-item v-if="form.isRegist === '0'" label="是否自定义报名信息">
              <el-radio v-model="form.isCustom" label="1">需要</el-radio>
              <el-radio v-model="form.isCustom" label="2">不需要</el-radio>
            </el-form-item>
            <!-- 身份证 手机号 所在省份特殊处理 -->
            <el-form-item v-if="form.isRegist === '0'" label="是否填写手机号">
              <el-radio v-model="form.isIphone" label="1">需要</el-radio>
              <el-radio v-model="form.isIphone" label="2">不需要</el-radio>
            </el-form-item>
            <el-form-item v-if="form.isRegist === '0'" label="是否填写身份证">
              <el-radio v-model="form.isCard" label="1">需要</el-radio>
              <el-radio v-model="form.isCard" label="2">不需要</el-radio>
            </el-form-item>
            <el-form-item v-if="form.isRegist === '0'" label="是否填写所在地区">
              <el-radio v-model="form.isProvinces" label="1">需要</el-radio>
              <el-radio v-model="form.isProvinces" label="2">不需要</el-radio>
            </el-form-item>
            <el-form-item v-if="form.isCustom === '1' && form.isRegist === '0'" label="自定义报名信息">
              <div class="table-btn-container">
                <el-button @click="insertTable1">新增</el-button>
                <span class="tip">（姓名为固有选项，无需添加） </span>
              </div>
              <div class="table-container">
                <el-table :data="form.tableData1" stripe style="width: 100%">
                  <el-table-column prop="date" label="名称" width="180">
                    <template slot-scope="scope">
                      <el-input v-model="scope.row.name" placeholder="请输入名称" />
                    </template>
                  </el-table-column>
                  <!-- <el-table-column prop="date" label="标识" width="180">
                    <template slot-scope="scope">
                      <el-input v-model="scope.row.code" placeholder="请输入标识" />
                    </template>
                  </el-table-column> -->
                  <el-table-column prop="name" label="是否必填" width="180">
                    <template slot-scope="scope">
                      <el-radio v-model="scope.row.required" label="1">必填</el-radio>
                      <el-radio v-model="scope.row.required" label="2">非必填</el-radio>
                    </template>
                  </el-table-column>
                  <el-table-column prop="address" label="输入类型">
                    <template slot-scope="scope">
                      <el-select v-model="scope.row.srlx" placeholder="请选择">
                        <el-option v-for="item in dict.srlx" :key="item.dictValue" :label="item.dictName" :value="item.dictValue" />
                      </el-select>
                    </template>
                  </el-table-column>
                  <el-table-column prop="address" label="排序">
                    <template slot-scope="scope">
                      <el-input v-model="scope.row.address" placeholder="请输入排序" />
                    </template>
                  </el-table-column>
                  <el-table-column prop="address" label="操作">
                    <template slot-scope="scope">
                      <el-button type="text" size="small" @click="deleteTable1(scope.$index)">删除</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </el-form-item>
          </el-form>
        </div>
        <div v-show="activeStep === 2" class="plane2">
          <div class="tab-container">
            <el-radio-group v-model="activeTab" @change="handleTabChange">
              <el-radio-button v-for="(i, n) in dict.bxrw" :key="n" :label="i.dictValue"> {{ i.dictName }} </el-radio-button>
            </el-radio-group>
          </div>
          <el-button v-if="!isLjqd" type="danger" icon="el-icon-plus" @click="isLjqd = !isLjqd">增加签到</el-button>
          <el-card v-if="activeTab === 'ZYLX_QD' && isLjqd" class="box-card">
            <div slot="header" class="clearfix card-header card-header-qd" style="display: flex;align-items: center;justify-content: space-between;">
              <div class="card-header" style="display: flex">
                <!-- <span class="card-title">{{ taskConfigJson[activeTab].name }}</span>
                <div class="cart-type">
                  任务类型：
                  <el-radio v-model="taskConfigJson[activeTab].data[0].taskType" label="1">必修</el-radio>
                  <el-radio v-model="taskConfigJson[activeTab].data[0].taskType" label="2">选修</el-radio>
                </div> -->
              </div>
              <div>
                <el-button type="danger" icon="el-icon-delete" circle @click="isLjqd = !isLjqd" />
              </div>
            </div>
            <ljqd :item="taskConfigJson[activeTab].data[0]" />
          </el-card>
          <el-card v-else-if="activeTab !== 'ZYLX_QD'" class="box-card">
            <div slot="header" class="clearfix card-header" style="display: flex">
              <span class="card-title">{{ taskConfigJson[activeTab].name }}</span>
              <!-- <div class="cart-type">
                任务类型：
                <el-radio v-model="taskConfigJson[activeTab].taskType" label="1">必修</el-radio>
                <el-radio v-model="taskConfigJson[activeTab].taskType" label="2">选修</el-radio>
              </div> -->
            </div>
            <div style="text-align: right; margin-bottom: 10px;">
              <el-button type="primary" @click="insertTaskConfig">新增</el-button>
            </div>
            <template v-if="taskConfigJson[activeTab].data.length > 0">
              <gksp v-for="(i, n) in taskConfigJson[activeTab].data" :key="n" :item="i" :area-id="areaId" @delete="handleDel" />
            </template>
            <template v-else>
              <div class="not-data">
                暂无配置
              </div>
            </template>
          </el-card>
        </div>
        <div v-show="activeStep === 3" class="plane3">
          <el-form label-width="125px" :model="form1">
            <el-form-item label="结课设置">
              <el-radio v-model="form1.type" label="1">自动结课</el-radio>
              <el-radio v-model="form1.type" label="2">人工结课</el-radio>
            </el-form-item>
            <el-form-item v-show="false" label="是否完成必修任务">
              <el-radio v-model="form1.isCompulsory" label="1">需要</el-radio>
              <el-radio v-model="form1.isCompulsory" label="0">不需要</el-radio>
            </el-form-item>
            <el-form-item v-show="false" label="是否完成选修任务">
              <el-radio v-model="form1.isElective" label="1">需要</el-radio>
              <el-radio v-model="form1.isElective" label="0">不需要</el-radio>
            </el-form-item>
            <el-form-item label="必修学时">
              <el-input-number v-model="form1.compulsoryDuration" :controls="false" style="width: 60%" :min="0" placeholder="请输入必修学时" />
            </el-form-item>
            <el-form-item label="选修学时">
              <el-input-number v-model="form1.electiveDuration" :controls="false" :min="0" style="width: 60%" placeholder="请输入选修学时" />
            </el-form-item>
            <el-form-item label="考试通过场数">
              <el-input-number v-model="form1.testSuccTimes" :controls="false" :min="0" style="width: 60%" placeholder="请输入考试通过场数" />
            </el-form-item>

            <el-form-item label="结课证书">
              <el-select v-model="form1.certificateId" placeholder="请选择" style="width: 60%">
                <el-option v-for="item in jkzsList" :key="item.id" :label="item.honorName" :value="item.id" />
              </el-select>
            </el-form-item>
            <el-form-item label="结课可获得积分">
              <el-input-number v-model="form1.getPoints" step-strictly :controls="false" :min="0" style="width: 60%" placeholder="请输入可获得积分" />
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
    <div class="footer">
      <el-button @click="$router.back()">取消</el-button>
      <el-button v-if="activeStep !== 1" type="primary" @click="previousStep">上一步</el-button>
      <el-button v-if="activeStep !== 3" type="primary" @click="nextStep">下一步</el-button>
      <el-button v-if="activeStep === 3" @click="submitForm">完成</el-button>
    </div>
    <el-dialog :title="'添加用户'" :visible.sync="dialogFormVisible" center fullscreen :close-on-click-modal="false">
      <add-user ref="resetAll" v-loading.fullscreen.lock="fullscreenLoading" :before-list="beforeList" @userData="userData" />
      <div slot="footer" class="dialog-footer">
        <el-button style="padding: 8px 30px;" @click="dialogFormVisible = false">取消</el-button>
        <el-button style="padding: 8px 30px;" type="primary" @click="insertUser()">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import ljqd from '../components/ljqd'
import gksp from '../components/gksp'
import addUser from '../components/adduser'
import CryptoJS from '@/utils/aesJiaJM'
import {
  classConfigGetData,
  classToastGetData,
  concludeGetData,
  classConfigUpdate,
  classToastUpdate,
  concludeUpdate,
  GetjkzsList
} from '../api/classConfigApi'

export default {
  name: 'ClassConfig',
  components: { ljqd, gksp, addUser },
  filters: {
    formmat(val) {
      return CryptoJS.$aesJieM(val)
    }
  },
  data() {
    return {
      isLjqd: false,
      areaId: '', // 班级id(必传)
      className: '创享惠工大赛培训班',
      stepsList: [
        {
          title: '班级设置'
        },
        {
          title: '任务配置'
        },
        {
          title: '结课配置'
        }
      ],
      activeTab: 'ZYLX_QD',
      dict: {
        bxrw: [
          {
            dictName: '累计签到',
            dictValue: 'ZYLX_QD'
          }
          // 暂时屏蔽其他选项配置
          // {
          //   dictName: '观看视频',
          //   dictValue: 'ZYLX_SP'
          // },
          // {
          //   dictName: '收听音频',
          //   dictValue: 'ZYLX_YP'
          // },
          // {
          //   dictName: '查看新闻',
          //   dictValue: 'ZYLX_XW'
          // },
          // {
          //   dictName: '查看资料',
          //   dictValue: 'ZYLX_ZL'
          // },
          // {
          //   dictName: '参与直播',
          //   dictValue: 'ZYLX_ZB'
          // },
          // {
          //   dictName: '参与活动',
          //   dictValue: 'ZYLX_HD'
          // },
          // {
          //   dictName: '参与闯关',
          //   dictValue: 'ZYLX_CG'
          // },
          // {
          //   dictName: '查看专区',
          //   dictValue: 'ZYLX_ZQ'
          // }
        ],
        srlx: [
          {
            dictName: '文本',
            dictValue: 'text'
          },
          {
            dictName: '文本域',
            dictValue: 'textarea'
          },
          {
            dictName: '图片',
            dictValue: 'img'
          }
        ]
      },
      taskConfigJson: {
        ZYLX_QD: {
          name: '累计签到',
          data: [{ finishValue: '', getReward1: '', taskRemark: '', taskType: '1' }]
        }
        // 暂时屏蔽其他选项配置
        // ZYLX_SP: {
        //   name: '观看视频',
        //   taskCode: 'ZYLX_SP',
        //   data: []
        // },
        // ZYLX_YP: {
        //   name: '收听音频',
        //   taskCode: 'ZYLX_YP',
        //   data: []
        // },
        // ZYLX_XW: {
        //   name: '查看新闻',
        //   taskCode: 'ZYLX_XW',
        //   data: []
        // },
        // ZYLX_ZL: {
        //   name: '查看资料',
        //   taskCode: 'ZYLX_ZL',
        //   data: []
        // },
        // ZYLX_ZB: {
        //   name: '参与直播',
        //   taskCode: 'ZYLX_ZB',
        //   data: []
        // },
        // ZYLX_HD: {
        //   name: '参与活动',
        //   taskCode: 'ZYLX_HD',
        //   data: []
        // },
        // ZYLX_CG: {
        //   name: '参加闯关',
        //   data: []
        // },
        // ZYLX_ZQ: {
        //   name: '查看专区',
        //   taskCode: 'ZYLX_ZQ',
        //   data: []
        // }
      },
      form: {
        isShowDiscuss: '1',
        isIphone: '1',
        isCard: '1',
        isProvinces: '1',
        classRemarks: '',
        registLimit: '',
        registLimitCheck: false,
        isRegist: '0',
        isDiscuss: '0',
        registRange: '0',
        isManual: '1',
        value1: [],
        tableData: [],
        tableData1: [],
        isCustom: '2',
        registInfo: []
      },
      rulesForm: {
        classRemarks: [{ required: true, message: '请填写结课要求', trigger: 'change' }]
      },
      form1: {},
      jkzsList: [],
      activeStep: 1,
      dialogFormVisible: false,
      beforeList: [],
      fullscreenLoading: false,
      selectData: []
    }
  },
  created() {
    // 检验班级id/必传
    if (!this.$route.query.id) {
      this.$message({
        showClose: true,
        message: '参数异常！',
        type: 'warning',
        onClose: () => {
          this.$router.back()
        }
      })
    } else {
      this.areaId = this.$route.query.id
      this.className = this.$route.query.name
    }
  },
  mounted() {
    this.init()
    this.getData()
    this.getJkzsList()
  },
  methods: {
    getJkzsList() {
      //  获取第三页的详情
      const loading = this.$loading({
        lock: true,
        text: '请稍后',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.3)'
      })
      const prams = {
        status: 'ZT01',
        honorType: 'RYFL_ZS'
      }
      GetjkzsList(prams)
        .then((res) => {
          loading.close()
          if (res.data.code === '200') {
            this.jkzsList = res.data.data
          }
        })
        .catch((err) => {
          loading.close(err)
        })
    },
    init() {
      // 获取数据
    },
    userData(user) {
      this.selectData = user
    },
    insertUser() {
      this.selectData.forEach((i) => {
        i.showDelete = true
      })
      this.form.tableData.push(...this.selectData)
      this.form.userIds = JSON.stringify(
        this.form.tableData.map((i) => {
          return {
            userId: i.id || i.userId,
            userName: i.userRealname
          }
        })
      )
      this.dialogFormVisible = false
    },
    handleDel(item) {
      if (item) {
        const index = this.taskConfigJson[this.activeTab].data.findIndex((i) => {
          return i.id === item.id && item.id
        })
        if (index !== -1) {
          this.taskConfigJson[this.activeTab].data.splice(index, 1)
          this.$message({
            type: 'success',
            message: '操作成功！'
          })
        }
      }
    },
    previousStep() {
      if (this.activeStep === 2) {
        this.activeStep -= 1
        this.getData()
      } else if (this.activeStep === 3) {
        this.activeStep -= 1
        this.getData()
      }
    },
    nextStep() {
      if (this.activeStep === 1) {
        this.submitForm().then(() => {
          this.activeStep += 1
          this.getData()
        })
      } else if (this.activeStep === 2) {
        this.submitForm().then(() => {
          this.activeStep += 1
          this.getData()
        })
      }
    },
    insertTable1() {
      this.form.tableData1.push({})
    },
    insertTable() {
      this.dialogFormVisible = true
    },
    deleteTable(row) {
      this.form.tableData.splice(row, 1)
    },
    deleteTable1(row) {
      this.form.tableData1.splice(row, 1)
    },
    insertTaskConfig() {
      this.taskConfigJson[this.activeTab].data.push({
        id: new Date().getTime(),
        taskCode: this.activeTab,
        resourcesJson: []
      })
    },
    handleTabChange(val) {
      if (this.taskConfigJson[val] && this.taskConfigJson[val].data) {
      } else {
        let name = ''
        let data = []
        this.dict.bxrw.forEach((i) => {
          if (i.dictValue === val) {
            name = i.dictName
          }
        })
        if (val === 'ZYLX_QD') {
          data = [{}]
        }
        this.taskConfigJson[val] = {
          name,
          data
        }
      }
    },
    submitForm() {
      return new Promise((resolve) => {
        if (this.activeStep === 1) {
          //  获取第一页的提交
          const loading = this.$loading({
            lock: true,
            text: '请稍后',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.3)'
          })
          const param = Object.assign({}, { ...this.form })
          param['applyStartTime'] = this.form.value1[0]
          param['applyEndTime'] = this.form.value1[1]
          if (param['registLimitCheck']) {
            param['registLimit'] = -1
          }
          if (param.isCustom !== '1') {
            param['tableData1'] = []
          }
          param['tableData1'].unshift({
            name: '所在地区',
            code: 'location',
            status: param.isProvinces === '1'
          })
          param['tableData1'].unshift({
            name: '证件号',
            code: 'idCard',
            status: param.isCard === '1'
          })
          param['tableData1'].unshift({
            name: '手机号',
            code: 'phoneNum',
            status: param.isIphone === '1'
          })
          param['registInfo'] = param['tableData1'] ? JSON.stringify(param['tableData1']) : '[]'
          param['id'] = this.areaId
          if (param.isRegist === '1') {
            delete param.registRange
          }
          if (param.isDiscuss === '1') {
            delete param.isShowDiscuss
          }
          delete param.tableData
          delete param.tableData1
          delete param.isIphone
          delete param.isCard
          delete param.isProvinces
          delete param.registLimitCheck
          delete param.value1
          classConfigUpdate(param)
            .then((res) => {
              loading.close()
              this.$message({
                type: 'success',
                message: '操作成功'
              })
              resolve()
            })
            .catch((err) => {
              loading.close(err)
            })
        }
        if (this.activeStep === 2) {
          if (
            this.isLjqd &&
            (this.taskConfigJson['ZYLX_QD'].data[0].taskType === '' ||
              this.taskConfigJson['ZYLX_QD'].data[0].getReward1 === '' ||
              this.taskConfigJson['ZYLX_QD'].data[0].finishValue === '')
          ) {
            this.$message({
              type: 'error',
              message: '请填写完善任务信息'
            })
            return
          }
          //  获取第二页的提交
          const loading = this.$loading({
            lock: true,
            text: '请稍后',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.3)'
          })
          const param = Object.assign({}, this.taskConfigJson)
          const paramFitle = {}
          for (const key in param) {
            if (key !== 'ZYLX_QD') {
              if (param[key].data.length > 0) {
                // if (param[key].finishCondition === '2') {

                // } else {
                //   paramFitle[key] = {
                //     id: param[key].id
                //   }
                // }
                paramFitle[key] = param[key]
              }
            } else {
              if (this.isLjqd) {
                paramFitle[key] = param[key]
              } else {
                paramFitle[key] = param[key]
                paramFitle[key]['data'] = []
              }
            }
          }
          const paramJson = JSON.stringify(paramFitle)
          const data = {
            areaId: this.areaId,
            taskConfigJson: paramJson
          }
          classToastUpdate(data)
            .then((res) => {
              loading.close()
              this.$message({
                type: 'success',
                message: '操作成功'
              })
              resolve()
            })
            .catch((err) => {
              loading.close(err)
            })
        }
        if (this.activeStep === 3) {
          //  获取第三页的提交
          const loading = this.$loading({
            lock: true,
            text: '请稍后',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.3)'
          })
          const param = Object.assign({}, this.form1)
          const data = {
            areaId: this.areaId,
            ...param
          }
          data.isElective = '0'
          data.isCompulsory = '1'
          concludeUpdate(data)
            .then((res) => {
              loading.close()
              this.$message({
                type: 'success',
                message: '操作成功'
              })
              resolve()
              this.$router.back()
            })
            .catch((err) => {
              loading.close(err)
            })
        }
      })
    },
    getData() {
      if (this.areaId) {
        if (this.activeStep === 1) {
          //  获取第一页的详情
          const loading = this.$loading({
            lock: true,
            text: '请稍后',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.3)'
          })
          const prams = {
            id: this.areaId
          }
          classConfigGetData(prams)
            .then((res) => {
              loading.close()
              if (res.data.code === '200') {
                // 逐步回显数据
                this.$set(this.form, 'classRemarks', res.data.data.classRemarks)
                this.$set(this.form, 'registLimit', res.data.data.registLimit)
                if (res.data.data.registLimit === -1) {
                  this.$set(this.form, 'registLimitCheck', true)
                }
                if (res.data.data.isRegist) {
                  this.$set(this.form, 'isRegist', res.data.data.isRegist + '')
                }
                if (res.data.data.registRange) {
                  this.$set(this.form, 'registRange', res.data.data.registRange + '')
                }
                if (res.data.data.isShowDiscuss === 0 || res.data.data.isShowDiscuss === 1) { // 当接口中没有isShowDiscuss时，就走默认配置：是否展示讨论交流选中是
                  this.$set(this.form, 'isShowDiscuss', res.data.data.isShowDiscuss + '')
                }
                if (res.data.data.isManual) {
                  this.$set(this.form, 'isManual', res.data.data.isManual + '')
                }
                if (res.data.data.isCustom) {
                  this.$set(this.form, 'isCustom', res.data.data.isCustom + '')
                }
                this.$set(this.form, 'tableData', res.data.data.userInfoList || [])
                this.insertUser() // 将人员全部在加入userIds中
                if (res.data.data.applyStartTime || res.data.data.applyEndTime) {
                  this.$set(this.form, 'value1', [res.data.data.applyStartTime, res.data.data.applyEndTime])
                }
                const infoData = JSON.parse(res.data.data.registInfo).slice(0, 3)
                this.$set(this.form, 'isIphone', infoData[0].status ? '1' : '2')
                this.$set(this.form, 'isCard', infoData[1].status ? '1' : '2')
                this.$set(this.form, 'isProvinces', infoData[2].status ? '1' : '2')
                this.$set(this.form, 'tableData1', JSON.parse(res.data.data.registInfo).slice(3) || [])
                this.$forceUpdate()
              }
            })
            .catch((err) => {
              loading.close(err)
            })
        }
        if (this.activeStep === 2) {
          //  获取第二页的详情
          const loading = this.$loading({
            lock: true,
            text: '请稍后',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.3)'
          })
          const prams = {
            areaId: this.areaId
          }
          classToastGetData(prams)
            .then((res) => {
              loading.close()
              if (res.data.code === '200') {
                // 逐步回显数据
                const dataObj = res.data.data
                if (!res.data.data['ZYLX_QD']) {
                  this.isLjqd = false
                  this.taskConfigJson['ZYLX_QD'] = {
                    name: '累计签到',
                    data: [{ finishValue: '', getReward1: '', taskRemark: '', taskType: '1' }]
                  }
                } else {
                  this.isLjqd = true
                }
                for (const key in dataObj) {
                  if (key === 'ZYLX_QD') {
                    this.taskConfigJson[key].data = dataObj[key]
                  }
                  // 暂时屏蔽其他选项配置
                  //  else {
                  //   this.taskConfigJson[key].data = dataObj[key].map((item) => {
                  //     return {
                  //       ...item,
                  //       taskCode: key
                  //     }
                  //   })
                  // }
                }
                this.$forceUpdate()
              }
            })
            .catch((err) => {
              loading.close(err)
            })
        }
        if (this.activeStep === 3) {
          //  获取第三页的详情
          const loading = this.$loading({
            lock: true,
            text: '请稍后',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.3)'
          })
          const prams = {
            areaId: this.areaId
          }
          concludeGetData(prams)
            .then((res) => {
              loading.close()
              if (res.data.code === '200') {
                this.form1 = Object.assign(
                  { ...res.data.data },
                  // {
                  //   isElective: res.data.data.isElective + '',
                  //   isCompulsory: res.data.data.isCompulsory + ''
                  // },
                  {
                    electiveDuration: res.data.data.electiveDuration ? res.data.data.electiveDuration : res.data.data.elective,
                    compulsoryDuration: res.data.data.compulsoryDuration ? res.data.data.compulsoryDuration : res.data.data.compulsory
                  }
                )
                this.$forceUpdate()
              }
            })
            .catch((err) => {
              loading.close(err)
            })
        }
      }
    }
  }
}
</script>

<style lang="scss">
.class-config {
  width: 100%;
  height: calc(100vh - 60px);
  padding: 10px;
  padding-bottom: 50px;
  overflow: hidden;

  .clearfix::after {
    display: none;
  }

  .class-config-container {
    height: 100%;
    width: 100%;
    background-color: #fff;
    position: relative;
    overflow: auto;
    padding-bottom: 10px;

    &::-webkit-scrollbar {
      width: 8px; /*对垂直流动条有效*/
      height: 1px; /*对水平流动条有效*/
    }

    /** 滚动条轨道*/
    &::-webkit-scrollbar-track {
      box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
      background-color: white;
      border-radius: 3px;
    }

    /** 滚动条里面小方块*/
    &::-webkit-scrollbar-thumb {
      height: 32px;
      border-radius: 5px;
      box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.1);
      background-color: #eaeaea;
    }

    .title {
      position: relative;
      height: 40px;
      line-height: 40px;
      padding: 0 20px;
      background-color: #fff;
      border-bottom: 1px solid #e5e5e5;
      font-weight: bold;
      color: #333;
      font-size: 14px;

      &::after {
        content: '';
        position: absolute;
        width: 2px;
        background-color: #e44d42;
        top: 13px;
        bottom: 13px;
        left: 15px;
      }
    }

    .step-container {
      padding: 30px;
    }

    .content-container {
      width: 1000px;
      margin: auto;

      .not-data {
        width: 100%;
        padding: 100px;
        text-align: center;
        color: #999;
      }

      .plane1 {
        .table-btn-container {
          margin-bottom: 10px;

          .tip {
            color: red;
          }
        }
      }

      .plane2 {
        .tab-container {
          margin-bottom: 10px;

          .card-header {
            &::after {
              display: none;
            }

            display: flex;

            .card-type {
            }

            .card-title {
              color: #333;
              font-size: 16px;
              font-weight: bold;
            }
          }

          .card-header-qd {
            .card-header {
              display: flex;
            }
          }
        }
      }
    }
  }

  .footer {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    text-align: center;
    padding: 10px 0;
    background-color: white;
    -webkit-box-shadow: 0 -3px 6px #f5f5f5;
    box-shadow: 0 -3px 6px #f5f5f5;
  }
}
</style>
